<script setup>
import  { ref } from 'vue'
const  QADialog = ref(false)
const emit = defineEmits({
  cancel: null,
  confirm: String,
  click: null
})
const question=ref('')
const handleCancel = () => {
  emit('cancel')
  QADialog.value=false
  ElMessage.info('已取消')
}
const handleConfirm = () => {
  if (question.value.length<=5){
    return ElMessage.error('问题不能少于5个字')
  }
  emit('confirm',question.value)
  QADialog.value=false
}
const onClick = () => {
  emit('click')
}
defineExpose({
  QADialog
})
</script>

<template>
  <div @click="onClick">
    <el-dialog v-model="QADialog" style="color: #39c5bb" title="填写问题">
      <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 50px">
        <el-input v-model="question" :show-word-limit="true" maxlength="150" placeholder="请描述您的问题" type="text" style="height: 50px"></el-input>
        <div>
          <el-button round  type="info" @click="handleCancel">取 消
          </el-button>
          <el-button
            color="#39c5bb"
            round
            style="color: #ffffff"
            type="primary"
            @click="handleConfirm"
          >提 交
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>